<template>
  <ee-dialog class="ee-toast" duration="0" overlay="none" scrollable>
    <template #icon>
      <slot name="icon">
      </slot>
    </template>
    <template #text>
      <slot name="text">
      </slot>
    </template>
    <slot>
    </slot>
  </ee-dialog>
</template>

<script type="text/javascript">
/**
 * @property {} default - 内容
 * @property {} default.icon - 上方图标
 * @property {} default.text - 下方文字
 */
export default {
  name: "ee-toast",
}
</script>

<style lang="scss">
.ee-toast {
  color: #fff;
  background-color: var(--ee-mask);
  padding: .75em 1.5em;
  border-radius: .5em;
  max-width: 88vw;
  max-height: 88vh;

  .icon {
    text-align: center;
    font-size: 3em;
    margin-bottom: .25em;
    display: block;
  }

  .text {
    text-align: center;
    flex: 1;
    line-height: 1.5;
  }
}
</style>